{% extends '__base__.html' %}
{% block title %}编辑{% endblock %}
{% block beforehead %}

<script>

var
    ID = '{{ id }}',
    action = '{{ action }}';

function initVM(employee) {
    var vm = new Vue({
        el: '#vm',
        data: employee,
        methods: {
            submit: function (event) {
                event.preventDefault();
                var $form = $('#vm').find('form');
                $form.postJSON(action, this.$data, function (err, r) {
                    return location.assign('/');
                });
            }
        }
    });
    $('#vm').show();
}

$(function () {
    if (ID) {
        getJSON('/services/employees/' + ID, function (err, employee) {
            $('#loading').hide();
            initVM(employee);
        });
    }
    else {
        $('#loading').hide();
        initVM({
            name: '',
            code: ''
        });
    }
});

</script>

{% endblock %}

{% block content %}



    <div id="loading" class="uk-width-1-1 uk-text-center">
        <span><i class="uk-icon-spinner uk-icon-medium uk-icon-spin"></i> 正在加载...</span>
    </div>

    <div id="vm" class="uk-width-2-3">
        <form v-on="submit: submit" class="uk-form uk-form-stacked">
            <div class="uk-form-row">
                <label class="uk-form-label">CODE</label>
                <div class="uk-form-controls">
                    <input v-model="code" name="code" type="text" placeholder="CODE" class="uk-width-1-1">
                </div>
            </div>
            <div class="uk-form-row">
                <label class="uk-form-label">NAME</label>
                <div class="uk-form-controls">
                    <input v-model="name" name="name" type="text" placeholder="NAME" class="uk-width-1-1">
                </div>
            </div>
            <div class="uk-form-row">
                <button type="submit" class="uk-button uk-button-primary"><i class="uk-icon-save"></i> SAVE</button>
                <a href="/" class="uk-button"><i class="uk-icon-times"></i> CANCEL</a>
            </div>
        </form>
    </div>

{% endblock %}
